<template>
    <div id="home">
 
       <div id="top">
            <div class="top-container">
                <div class="top-login" @click="dialogVisible = true">
                    <div v-show="!isShow">admin</div>
                    <div v-show="isShow">{{ruleForm.userName}}</div>
                </div>
                <div @click="exit()">logout</div>
                <van-icon name="shopping-cart-o" size="30" @click="goto()" />
            </div>
       </div> 

       <div id="box">
           <div class="box-container">
               <div class="box-header">
                    Sort by：
                    <span style="color:#C1976B;">Default</span>
                    <span style="margin:0 25px;" @click="onClickSort">Price 
                        <i class="el-icon-top" v-show="num%2==0"></i>
                        <i class="el-icon-bottom" v-show="num%2!=0"></i>
                    </span>
               </div>
               <div class="box-bottom">
                   <el-container>
                        <el-aside width="200px">
                            <el-menu 
                                router
                                default-active="/" 
                                mode="horizontal"  
                                background-color="#D3DCE6" 
                                text-color="black" 
                                active-text-color="#C48D3A">
                                <el-menu-item index="/">All</el-menu-item>
                                <el-menu-item index="/list1">0-1000</el-menu-item>
                                <el-menu-item index="/list2">1000-2500</el-menu-item>
                                <el-menu-item index="/list3">3500……</el-menu-item>
                            </el-menu>
                        </el-aside>
                        <el-main>
                            <router-view></router-view>
                        </el-main>
                    </el-container>
               </div>
           </div>
       </div>

       <!-- 登录 对话框 -->
        <el-dialog title="登录" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div class="login_wrapper">
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="demo-ruleForm"
                    >
                    <el-form-item label="账号" prop="userName">
                        <el-input type="username" v-model="ruleForm.userName" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="passWord">
                        <el-input type="password" v-model="ruleForm.passWord" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>

        
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            isShow:false,
            num: 0, //记录点击的次数
            ruleForm: {
                userName: "",
                passWord: "",
            },
            rules: {
                userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
                passWord: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 6,max: 18,message: "密码长度在 6 到 18 个字符",trigger: "blur",},
                ],
            },
        }
    },
    mounted() {
        var user = JSON.parse(localStorage.getItem("user"));
        if(user){
            this.ruleForm = user;
            this.isShow = true;
            // console.log(this.ruleForm);
        }else{
            this.isShow=false;
            return;
        }
    },
    watch: {
        "$route.path": function (newVal, oldVal) {
            if (oldVal !== newVal) {
                this.num = 0;
            }
        },
    },
    methods: {
        // 跳转 购物车
        goto(){
            this.$router.push("/Cart");
        },
        // 点击排序
        onClickSort() {
            // console.log(this.num);
            this.num++;
            this.$store.commit("Sort_PRICE_GOODS", this.num);
        },
        // 点击跳转购物车页面
        onClickGoCart() {
            this.$router.push("/cart");
        },
        handleClose(done) {
            this.$confirm('确认关闭？').then(_ => {
                done();
            }).catch(_ => {

            });
        },
        submitForm(formName) {
            this.dialogVisible=false;
            //点击登录
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // console.log(this.ruleForm);
                    this.isShow = true;
                    localStorage.setItem("user", JSON.stringify(this.ruleForm));
                    this.$message("登录成功");
                } else {
                    console.log("error submit!!");
                    this.isShow = false;
                    this.$message("登录失败");
                    return false;
                }
            });
        },
        resetForm(formName) {//点击重置
            this.$refs[formName].resetFields();
        },
        // 点击 退出登录
        exit(){
            localStorage.removeItem("user");
            this.ruleForm = [];
        }
    },
}
</script>

<style lang="scss">
#home{
    width:100%;
    height:100vh;
    background-color: #F5F7FB;
    #top{
        width:100%;
        height:8vh;
        background-color: #fff;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        .top-container{
            width:90%;
            height:100%;
            // border:1px solid red;
            display: inline-flex;
            justify-content: flex-end;
            align-items: center;
            .top-login{
                margin-right: 20px;
                display: inline-flex;
                justify-content: center;
                align-items: center;
            }
            .van-icon{
                margin-left: 10px;
            }
        }
    }
    #box{
        width:100%;
        height:92vh;
        // border:1px solid red;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        .box-container{
            width:90%;
            height:89%;
            // border:1px solid red;
            .box-header{
                width:100%;
                height:8%;
                background-color: #fff;
                display: inline-flex;
                justify-content: flex-end;
                align-items: center;
            }
            .box-bottom{
                width:100%;
                height:92%;
                // background-color: yellow;
                .el-aside {
                    height:75vh;
                    background-color: #D3DCE6;
                    color: #333;
                    text-align: center;
                    // line-height: 200px;
                    .el-menu{
                        .el-menu-item{
                            width:100%;
                            text-align: left;
                        }
                    }
                }
                .el-main {
                    background-color: #E9EEF3;
                    color: #333;
                    text-align: center;
                    // line-height: 160px;
                }
            }
        }
    }
    .el-dialog{
        .login_wrapper{
            padding-right: 50px;
        }
    }
}
</style>